<route lang="json5">
{
  needLogin: false,
  style: {
    navigationStyle: 'default',
    navigationBarTitleText: '登录',
	navigationBarBackgroundColor: '#ffffff',
  },
}
</route>

<template>
  <view class="min-h-screen bg-white">
    <!-- 顶部导航栏 -->
  <!--  <wd-navbar
      placeholder
      fixed
      safeAreaInsetTop
      :bordered="false"
      :leftArrow="false"
      custom-class="!bg-white !border-b-none"
    ></wd-navbar> -->
    <view class="flex flex-col items-center justify-center box-border px-68rpx">
      <view class="w-159rpx h-159rpx border-rd-[36rpx_36rpx__36rpx__36rpx] mb-35rpx mt-130rpx">
        <image src="/static/images/logo.png" class="w-full h-full" mode="aspectFit" />
      </view>
      <view class="font-bold text-60rpx text-[#333333] lh-60rpx mb-13rpx">数字底座</view>
      <view class="w-206rpx h-36rpx mb-69rpx">
        <image src="/static/images/login/embark.png" class="w-full h-full" mode="aspectFit" />
      </view>
      <view
        class="h-88rpx bg-[#F6F9FE] border-rd-[60rpx_60rpx_60rpx_60rpx] w-full mb-26rpx flex items-center"
      >
        <image
          src="/static/images/login/username.png"
          class="w-36rpx h-36rpx ml-35rpx mr-8rpx"
          mode="aspectFit"
        />
        <view class="flex-1 h-full mr-8rpx flex items-center">
          <wd-input
            v-model="formData.username"
            clear-trigger="focus"
            placeholder="请输入账号"
            no-border
            custom-class="w-full !bg-[#F6F9FE] font-bold text-30rpx text-[#3D3D3D]"
          />
        </view>
        <image
          v-show="formData.username"
          src="/static/images/login/cancel.png"
          class="w-36rpx h-36rpx ml-a mr-40rpx"
          mode="aspectFit"
          @click="clearName"
        />
      </view>
      <view
        class="h-88rpx bg-[#F6F9FE] border-rd-[60rpx_60rpx_60rpx_60rpx] w-full mb-26rpx flex items-center"
      >
        <image
          src="/static/images/login/pass.png"
          class="w-36rpx h-36rpx ml-35rpx mr-8rpx"
          mode="aspectFit"
        />
        <view class="flex-1 h-full mr-40rpx flex items-center">
          <wd-input
            v-model="formData.password"
            clear-trigger="focus"
            placeholder="请输入密码"
            :no-border="true"
            :show-password="true"
            custom-class="w-full !bg-[#F6F9FE] font-bold text-30rpx text-[#3D3D3D]"
          />
        </view>
      </view>
      <view
        class="h-88rpx bg-[#F6F9FE] border-rd-[60rpx_60rpx_60rpx_60rpx] w-full flex items-center"
      >
        <image
          src="/static/images/login/code.png"
          class="w-36rpx h-36rpx ml-35rpx mr-8rpx"
          mode="aspectFit"
        />
        <view class="flex-1 h-full mr-8rpx flex items-center">
          <wd-input
            v-model="formData.code"
            clear-trigger="focus"
            placeholder="请输入验证码"
            no-border
            custom-class="w-full !bg-[#F6F9FE] font-bold text-30rpx text-[#3D3D3D]"
          />
        </view>
        <view class="ml-a mr-40rpx w-148rpx h-56rpx bg-[#F6F9FE]" @click="refreshCaptchaImage">
          <image :src="image.imageInfo" class="w-full h-full" mode="aspectFit" />
        </view>
      </view>
      <view
        @click="passwordLogin"
        class="h-88rpx bg-gradient-linear bg-gradient-[90deg,#0D53FF_2%,#20A4FF_100%] border-rd-[50rpx_50rpx_50rpx_50rpx] w-full mt-60rpx font-bold text-34rpx text-[#FFFFFF] lh-47rpx flex justify-center items-center"
      >
        立即登录
      </view>
      <view
        class="font-400 text-22rpx text-[#3670F7] lh-30rpx mt-28rpx ml-a mr-54rpx"
        @click="handleForgetPassword"
      >
        忘记密码
      </view>
      <view class="flex items-center mt-50rpx" @click="toggleAgreement">
        <image
          class="w-34rpx h-34rpx mr-12rpx"
          :src="
            formData.isAgreement
              ? '/static/images/login/check.png'
              : '/static/images/login/no-check.png'
          "
          mode="scaleToFill"
        />
        <view class="font-400 text-26rpx text-[#3D3D3D]">
          登录即代表同意
          <text class="text-[#1977FF]">《用户协议》</text>
          <text class="text-[#1977FF]">《隐私协议》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { captchaImage } from '@/service/auth'
import { useUserStore, useChatStore, useGroupStore } from '@/store'

import { CheckboxInstance } from '@uni-helper/uni-types/index'
import { initChat } from '@/utils/chatSocket'

const checkBox1 = ref<CheckboxInstance>()
const agreementValue = ref<string[]>([])

const userStore = useUserStore()
const chatStore = useChatStore()
const groupStore = useGroupStore()

const formData = reactive({
  username: '17398405057',
  password: '123456',
  grantType: 'password',
  code: '',
  uuid: '',
  isAgreement: false,
})

const image = reactive({
  requiredCaptcha: false,
  imageInfo: '',
  loadSuccess: false,
})
function toggleAgreement() {
  formData.isAgreement = !formData.isAgreement
}
function clearName() {
  formData.username = ''
}

async function refreshCaptchaImage() {
  try {
    const data = await captchaImage()
    if (data.code === 200) {
      formData.uuid = data.data.uuid
      image.requiredCaptcha = data.data.captchaEnabled
      image.imageInfo = `data:image/gif;base64,${data.data.img}`
      image.loadSuccess = true
    }
    formData.code = ''
  } catch (e) {
    console.error('验证码异常')
    image.loadSuccess = false
  }
}

const validateForm = () => {
  if (!formData.isAgreement) {
    uni.showToast({
      title: '请阅读并同意用户协议和隐私协议',
      icon: 'none',
      duration: 2000,
      position: 'bottom',
    })
    return false
  }
  if (!formData.username?.trim()) {
    uni.showToast({
      title: '请输入账号',
      icon: 'none',
    })
    return false
  }
  if (!formData.password?.trim()) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none',
    })
    return false
  }
  if (formData.password.length < 6) {
    uni.showToast({
      title: '密码长度不能小于6位',
      icon: 'none',
    })
    return false
  }
  if (!formData.code?.trim()) {
    uni.showToast({
      title: '请输入验证码',
      icon: 'none',
    })
    return false
  }
  return true
}

async function passwordLogin() {
  if (!validateForm()) return
  uni.showLoading({
    title: '登录中',
    mask: true,
  })
  try {
    await userStore.handleLogin(formData)
    await userStore.getUserInfo()
    initChat()
    uni.reLaunch({ url: '/pages/index/index' })
  } catch (error) {
    console.error('登录失败:', error)
    refreshCaptchaImage() // 登录失败时重新获取验证码
  } finally {
    uni.hideLoading()
  }
}
onShow(async () => {
  userStore.clearUserInfo()
  chatStore.clear()
  groupStore.clear()
  await refreshCaptchaImage()
})

const handleForgetPassword = () => {
  uni.navigateTo({
    url: '/pages/login/forget-password',
  })
}
function noop() {
  formData.isAgreement = agreementValue.value.length > 0
  if (formData.isAgreement) {
    uni.vibrateShort()
  }
}
function checkboxChange() {
  checkBox1.value && checkBox1.value?.toggle()
  formData.isAgreement = agreementValue.value.length > 0
  if (formData.isAgreement) {
    uni.vibrateShort()
  }
}
function handleUserAgreement() {}
</script>
<style lang="scss" scoped>
:deep(.wd-input__icon) {
  background: #f7f7f7 !important;
}
</style>
